<template>
  <div style="padding-top: 40px">
    <ul class="nav">
      <li>
        <a
          href="https://github.com/MTTTM/vue-keyboard-cn/tree/main/src/demo"
          target="_blank"
          >demo sourseCode</a
        >
      </li>
      <li>
        <h3>input-> defaultInput</h3>
      </li>
      <template v-for="item in defaultInput">
        <li
          class="nav-item"
          :key="item.path"
          v-if="item.path !== '/' && item.path !== '/home'"
        >
          <router-link class="nav-link" :to="item.path"
            >{{ item.cnTit }} - <span>({{ item.title }})</span></router-link
          >
        </li>
      </template>
      <li>
        <h3>input-> passWordInput</h3>
      </li>
      <template v-for="item in passWordInput">
        <li
          class="nav-item"
          :key="item.path"
          v-if="item.path !== '/' && item.path !== '/home'"
        >
          <router-link class="nav-link" :to="item.path"
            >{{ item.cnTit }} - <span>({{ item.title }})</span></router-link
          >
        </li>
      </template>
      <li>
        <h3>KeyBoard-> numberKeyBoard</h3>
      </li>
      <template v-for="item in numberKeyBoard">
        <li
          class="nav-item"
          :key="item.path"
          v-if="item.path !== '/' && item.path !== '/home'"
        >
          <router-link class="nav-link" :to="item.path"
            >{{ item.cnTit }} - <span>({{ item.title }})</span></router-link
          >
        </li>
      </template>
      <li>
        <h3>kbscrollView-输入框被键盘遮住</h3>
      </li>
      <template v-for="item in kbScrollView">
        <li
          class="nav-item"
          :key="item.path"
          v-if="item.path !== '/' && item.path !== '/home'"
        >
          <router-link class="nav-link" :to="item.path"
            >{{ item.cnTit }} - <span>({{ item.title }})</span></router-link
          >
        </li>
      </template>
    </ul>
  </div>
</template>
<script>
import routes from "../router/routes.js";
export default {
  data() {
    return {
      routes,
    };
  },
  computed: {
    defaultInput() {
      return routes.filter((item) => item.compName === "defaultInput");
    },
    passWordInput() {
      return routes.filter((item) => item.compName === "passWordInput");
    },
    numberKeyBoard() {
      return routes.filter((item) => item.compName === "numberKeyBoard");
    },
    kbScrollView() {
      return routes.filter((item) => item.compName === "keyboard");
    },
  },
};
</script>
<style lang="css" scoped>
h3 {
  padding: 10px 0;
  border-bottom: 1px solid #666;
  margin-bottom: 5px;
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding-left: 10px;
}
a {
  text-decoration: none;
  font-weight: 16px;
  color: #333;
}
span {
  font-size: 12px;
}
</style>